<template>
  <div class="app">
    <div class="container">
      <!-- 头部 -->
      <AppHeader />

      <!-- 总览卡片 -->
      <OverviewCard
        :monthly-income="monthlyIncome"
        :monthly-expense="monthlyExpense"
        :monthly-balance="monthlyBalance"
      />

      <!-- 标签页 -->
      <TabBar :current-tab="currentTab" @change-tab="currentTab = $event" />

      <!-- 内容区域 -->
      <div class="tab-content">
        <RecordView
          v-show="currentTab === 'record'"
          @record-added="handleRecordAdded"
        />
        <ListView
          v-show="currentTab === 'list'"
          :records="records"
          @delete-record="handleDeleteRecord"
        />
        <StatsView
          v-show="currentTab === 'stats'"
          :records="records"
        />
      </div>
    </div>

    <!-- Toast 提示 -->
    <Toast :message="toast.message" :visible="toast.visible" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import AppHeader from './components/AppHeader.vue'
import OverviewCard from './components/OverviewCard.vue'
import TabBar from './components/TabBar.vue'
import RecordView from './views/RecordView.vue'
import ListView from './views/ListView.vue'
import StatsView from './views/StatsView.vue'
import Toast from './components/Toast.vue'
import { useRecords } from './store/records'

const currentTab = ref('record')
const toast = ref({ message: '', visible: false })

// 使用记录管理
const { records, monthlyIncome, monthlyExpense, monthlyBalance, addRecord, deleteRecord } = useRecords()

// 处理添加记录
const handleRecordAdded = (record) => {
  addRecord(record)
  currentTab.value = 'list'
  showToast('记账成功！')
}

// 处理删除记录
const handleDeleteRecord = (id) => {
  deleteRecord(id)
  showToast('删除成功！')
}

// 显示提示
const showToast = (message) => {
  toast.value = { message, visible: true }
  setTimeout(() => {
    toast.value.visible = false
  }, 2000)
}
</script>

<style>
.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.tab-content {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .container {
    padding: 12px;
  }

  .tab-content {
    padding: 16px;
  }
}
</style>
